<template>
  <page-container title="用户资料">
    <div class="user-profile-view">
      <div class="profile-header">
        <div class="avatar-container">
          <el-avatar
            v-if="userData.avatar"
            :src="userData.avatar"
            :size="120"
            class="user-avatar"
          />
          <el-avatar
            v-else
            :size="120"
            class="user-avatar"
          >
            {{ userData.username?.charAt(0) }}
          </el-avatar>
        </div>
        <div class="user-basic-info">
          <h2>{{ userData.username }}</h2>
          <div class="user-meta">
            <el-tag class="uniform-tag">
              {{ roleMap[userData.role] || userData.role }}
            </el-tag>
            <el-tag class="uniform-tag" v-if="userData.departmentname">
              {{ userData.departmentname }}
            </el-tag>
          </div>
        </div>
      </div>

      <el-divider />

      <div class="profile-details">
        <h3 class="details-title">详细信息</h3>
        <el-descriptions
          :column="1"
          border
          label-class-name="description-label"
          class="details-container"
        >
          <el-descriptions-item label="用户ID">
            <span class="detail-value">{{ userData.id }}</span>
          </el-descriptions-item>

          <el-descriptions-item label="用户名">
            <span class="detail-value">{{ userData.username }}</span>
          </el-descriptions-item>

          <el-descriptions-item label="身份">
            <span class="detail-value">{{ roleMap[userData.role] || userData.role }}</span>
          </el-descriptions-item>

          <el-descriptions-item label="所属部门">
            <span class="detail-value">{{ userData.departmentname }}</span>
          </el-descriptions-item>

          <el-descriptions-item label="创建时间">
            <span class="detail-value">{{ userData.createdAt }}</span>
          </el-descriptions-item>

          <el-descriptions-item label="更新时间">
            <span class="detail-value">{{ userData.updatedAt }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </page-container>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const { user } = userStore
const { proxy } = getCurrentInstance()
const avatar = ref(proxy.$apiBaseUrl + '/' + user.avatar)

// 用户数据
const userData = ref({
  id: 0,
  username: '',
  role: '',
  departmentname: '',
  avatar: null,
  createdAt: '',
  updatedAt: ''
})

// 角色映射
const roleMap = {
  admin: '管理员',
  manager: '经理',
  employee: '员工'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
}

// 初始化数据
onMounted(() => {
  userData.value = {
    id: user.id,
    username: user.username,
    role: user.role,
    departmentname: user.departmentname,
    avatar: avatar.value,
    createdAt: formatDate(user.createdAt),
    updatedAt: formatDate(user.updatedAt)
  }
})
</script>

<style lang="scss" scoped>
.user-profile-view {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;

    .avatar-container {
      .user-avatar {
        font-size: 48px;
        font-weight: bold;
        background: linear-gradient(135deg, #409EFF, #67C23A);
        color: white;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      }
    }

    .user-basic-info {
      h2 {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }

      .user-meta {
        margin-top: 12px;
        display: flex;
        gap: 8px;
      }
    }
  }

  .el-divider {
    margin: 20px 0;
  }

  .details-title {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: #606266;
    font-weight: 500;
  }

  :deep(.description-label) {
    width: 120px;
    background-color: #f8f9fa;
    text-align: center;
    font-weight: 500;
    color: #606266;
  }

  .detail-value {
    color: #303133;
    font-weight: 500;
  }

  :deep(.el-descriptions__body) {
    background-color: #fff;
  }

  :deep(.el-descriptions__table) {
    width: 100%;
  }

  .uniform-tag {
    color: black;
    background-color: #e6f7ff;
    border-color: #91d5ff;
  }
}

@media (max-width: 768px) {
  .user-profile-view {
    padding: 16px;

    .profile-header {
      flex-direction: column;
      text-align: center;

      .user-basic-info {
        text-align: center;

        .user-meta {
          justify-content: center;
        }
      }
    }
  }
}
</style>
